<template>
  <div class="contrast sub-margin">
    <div class="sub-page-title sub-page-return">
      <el-button size="small" icon="el-icon-arrow-left" @click.stop="goback">返回</el-button>
      人员对比
    </div>
    <div class="con">
      <!-- 人员对比 -->
      <div class="head">
        <div class="user_list">
          <ContrastHead :userInfo="pageData[0]" />
        </div>
        <div class="vs">
          <div class="text">VS</div>
          <el-button type="text" @click="selectUser">
            <i class="el-icon-sort icon"></i>
            选择人员
          </el-button>
        </div>
        <div class="user_list">
          <ContrastHead :userInfo="pageData[1]" />
        </div>
      </div>

      <!-- 考核总分对比 -->
      <div class="total_c">
        <div class="list_title">
          <div class="text">
            <!-- 个人绩效 -->
            考核总分对比
          </div>
          <div class="oper quarter">
            <el-select v-model="timeValue" placeholder="请选择" size="mini" @change="timeChange" value-key="name">
              <el-option v-for="item in options" :key="item.name" :label="item.name" :value="item"></el-option>
            </el-select>
          </div>
        </div>
        <div class="total_con">
          <div class="c_li" v-if="pageData.length > 0">
            <div :class="['label', { color: false }]">
              <div class="item">个人考核得分</div>
              <div class="item">考核等次</div>
            </div>
            <div class="val">
              <div class="num">{{ pageData[0].totalScore }}</div>
              <div class="order">
                <span>{{ pageData[0].scoreLevel }}</span>
              </div>
            </div>
          </div>
          <div class="no_assess" v-else>该季度未参与考核</div>
          <div class="c_li" v-if="pageData.length > 1">
            <div :class="['label', { color: true }]">
              <div class="item">个人考核得分</div>
              <div class="item">考核等次</div>
            </div>
            <div class="val">
              <div class="num">{{ pageData[1].totalScore }}</div>
              <div class="order">
                <span>{{ pageData[1].scoreLevel }}</span>
              </div>
            </div>
          </div>
          <div class="no_assess" v-else>该季度未参与考核</div>
        </div>
      </div>

      <!-- 指标考核分对比 -->
      <div class="assess">
        <div class="list_title">
          <div class="text">指标考核分对比</div>
        </div>
        <div class="assess_chart" id="assess" v-if="chartData.length > 0"></div>
        <div class="assess_chart" v-else>
          <div class="no_data">
            <empty></empty>
          </div>
        </div>
      </div>
    </div>
    <PersonnelSelect
      @close="userClose"
      :showStatus="selectUserShow"
      @commit="commit"
      :idArr="contrastId"
      :dataObj="timeValue" />
  </div>
</template>

<script>
import PersonnelSelect from './components/PersonnelSelect'
import ContrastHead from './components/ContrastHead'
import { getlistYearQuarter, getCompareResultList } from '@apis/api-intelligent.js'
import Echarts from '@libs/echarts'
export default {
  name: 'PSKH_JXXIAO_PORTRAIT_CONTRAST',
  components: { ContrastHead, PersonnelSelect },
  props: {},
  data() {
    return {
      options: [],
      timeValue: {
        ischoose: false,
        name: '2021年第四季度',
        quarter: '4',
        year: '2021',
      },
      // 人员筛选弹框
      selectUserShow: false,

      // 对比ID集合
      contrastId: [],
      contrastInfo: [],
      // 页面数据
      pageData: [],
      // echarts数据
      myChart: null,
      chartData: [],
      indicator: [],
      // 得分详情弹框
      dialogVisible: false,
      // 存弹框数据
      dialogData: [],
      dialogShowData: [],
      timeInfo: {},
    }
  },
  computed: {},
  filters: {},
  watch: {},
  created() {},
  mounted() {
    const { info, timeInfo } = this.$route.params
    this.timeInfo = JSON.parse(timeInfo) || {}
    this.contrastInfo = JSON.parse(info)
    this.contrastId = [this.contrastInfo[0].id, this.contrastInfo[1].id]
    this.getlistYearQuarter()
  },
  methods: {
    async pageInit() {
      const param = []
      this.contrastInfo.forEach(item => {
        param.push({
          userId: item.id,
          organId: item.organId,
          year: this.timeValue.year,
          quarter: this.timeValue.quarter,
        })
      })
      const { data } = await getCompareResultList(param)
      this.pageData = data

      this.chartData = []
      if (this.myChart) {
        this.myChart.dispose()
      }
      if (data[0].scoreCompareList && data[0].scoreCompareList.length === 0) {
        return
      }

      const serveData = []
      const indicator = []
      const cd = []
      const ir = []
      const names = []
      data.forEach((li, index) => {
        cd[index] = []
        ir[index] = []
        const sm = new Map()
        const im = new Map()
        if (li.scoreCompareList && li.scoreCompareList.length > 0) {
          const sortArr = li.scoreCompareList

          sortArr.forEach(item => {
            if (!names.includes(item.scoreName)) {
              names.push(item.scoreName)
            }
            sm.set(item.scoreName, item.score)
            im.set(item.scoreName, item.score)
          })
          serveData[index] = sm
          indicator[index] = im
        }
      })

      for (let i = 0; i < serveData.length; i++) {
        const sums = serveData[i]
        const iss = indicator[i]
        for (let j = 0; j < names.length; j++) {
          const n = names[j]
          cd[i].push(sums.get(n))
          ir[i].push({
            text: n,
            max: iss.get(n),
          })
        }
      }
      this.chartData = cd
      this.indicator = ir

      this.$nextTick(() => {
        this.drawChart()
      })
    },
    timeChange() {
      this.pageInit()
    },
    goback() {
      this.$router.go(-1)
    },
    selectUser() {
      this.selectUserShow = true
    },
    userClose() {
      this.selectUserShow = false
    },
    commit(data) {
      this.contrastInfo = data
      this.contrastId = [data[0].id, data[1].id]
      this.userClose()
      this.pageInit()
    },
    // closeDialog() {
    //   this.dialogVisible = false
    // },
    drawChart() {
      const that = this
      let arr = []
      if (that.indicator.length > 1) {
        const li = that.indicator[0]
        const item = that.indicator[1]
        for (let i = 0; i < li.length; i++) {
          for (let j = 0; j < item.length; j++) {
            if (item[j].text === li[i].text) {
              if (Number(item[j].max) > Number(li[i].max)) {
                arr.push(item[j])
              } else {
                arr.push(li[i])
              }
            }
          }
        }
      } else {
        arr = that.indicator[0]
      }

      that.myChart = Echarts.init(document.getElementById('assess'))
      const option = {
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          left: 'center',
          itemWidth: 40,
          itemHeight: 4,
          textStyle: {
            fontSize: 16,
          },
        },
        // grid: {
        //   bottom: 10,
        //   top: 10,
        //   containLabel: true,
        // },
        radar: [
          {
            indicator: arr,
            center: ['50%', '55%'],
            radius: '50%',
            name: {
              color: '#333',
              fontSize: '14',
            },
            triggerEvent: true,
            nameGap: 30,
            splitNumber: 10, // 雷达图圈数设置
          },
        ],
        series: [
          {
            type: 'radar',
            tooltip: {
              trigger: 'item',
            },

            areaStyle: {},
            data: [
              {
                value: that.chartData[0],
                name: that.pageData[0].userName,
                areaStyle: {
                  normal: {
                    color: 'rgba(225, 175, 84,.1)', // 选择区域颜色
                  },
                },
                lineStyle: {
                  color: '#e1af54', // 雷达构成的区域边框
                  opacity: 0.3,
                },
                itemStyle: {
                  color: '#e1af54',
                },
                label: {
                  show: true,
                  position: ['-0', '7'],
                  fontSize: 14,
                  fontWeight: 600,
                  align: 'center',
                },
              },
              {
                value: that.chartData.length > 1 ? that.chartData[1] : [],
                name: that.pageData.length > 1 ? that.pageData[1].userName : '',
                areaStyle: {
                  normal: {
                    color: 'rgba(0, 0, 255,.1)', // 选择区域颜色
                  },
                },
                lineStyle: {
                  color: '#0080FF', // 雷达构成的区域边框
                  opacity: 0.3,
                },
                itemStyle: {
                  color: '#0080FF',
                },
                label: {
                  show: true,
                  position: ['-0', '-14'],
                  fontSize: 14,
                  fontWeight: 600,
                  align: 'center',
                },
              },
            ],
            label: {
              normal: {
                show: true,
                formatter: function (params) {
                  return params.value
                },
              },
            },
          },
        ],
      }
      that.myChart.setOption(option)
      // myChart.on('click', 'radar', function (params) {
      //   that.handleDialogData(params.name)
      // })
    },
    compare(prop) {
      return function (obj1, obj2) {
        let val1 = obj1[prop]
        let val2 = obj2[prop]
        if (!isNaN(Number(val1)) && !isNaN(Number(val2))) {
          val1 = Number(val1)
          val2 = Number(val2)
        }
        if (val1 < val2) {
          return -1
        } else if (val1 > val2) {
          return 1
        } else {
          return 0
        }
      }
    },
    // handleDialogData(name) {
    //   let data = []
    //   this.dialogData.forEach((item) => {
    //     if (item.indexName == name) {
    //       data.push(item.portraitIndexListResponseList)
    //     }
    //   })
    //   this.dialogShowData = data
    //   this.dialogVisible = true
    // },
    getlistYearQuarter() {
      getlistYearQuarter().then(res => {
        this.options = res.data
        if (this.timeInfo.year) {
          const arr = res.data.filter(item => {
            return item.year === this.timeInfo.year && item.quarter === this.timeInfo.quarter
          })
          this.timeValue = arr[0]
        } else {
          this.timeValue = res.data[0]
        }
        this.pageInit()
      })
    },
  },
}
</script>

<style lang="scss" scoped>
@import './components/title.scss';
@import '@styles/layout.scss';

.contrast {
  height: 100%;
  background-color: #fff;
  font-size: 14px;
  overflow: auto;

  .title {
    height: 58px;
    border-top: 4px solid #8499bc;
    border-bottom: 1px solid #fff;
    background-color: #4a79ba;
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
    color: #fff;

    .back {
      display: inline-block;
      height: 58px;
      line-height: 58px;
      width: 50px;
      text-align: center;
      cursor: pointer;
    }
  }

  .con {
    padding: 20px;

    .head {
      display: flex;
      justify-content: center;
      align-items: center;

      .user_list {
        width: 45%;
      }

      .vs {
        width: 10%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .text {
          font-size: 26px;
          font-weight: bold;
        }

        .icon {
          transform: rotate(90deg);
          color: #0080ff;
          font-size: 16px;
        }
      }
    }

    // 考核总分对比
    .total_c {
      margin-top: 20px;

      .total_con {
        display: flex;
        justify-content: space-between;
        margin-top: 20px;

        .c_li {
          width: 45%;
          border: 1px solid #ccc;
          padding: 20px;

          .label {
            font-size: 14px;
            display: flex;
            justify-content: center;
            align-items: center;

            .item {
              color: #999;
              height: 30px;
              width: 50%;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }

          .val {
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;

            .num {
              color: #9f814b;
              font-size: 36px;

              width: 50%;
              display: flex;
              justify-content: center;
              align-items: center;
            }

            .order {
              width: 50%;
              display: flex;
              justify-content: center;
              align-items: center;
              color: #9f814b;
              font-size: 20px;

              span {
                padding: 0 30px;
                border: 1px solid #9f814b;
                background: #f2f1eb;
                font-weight: 600;
                border-radius: 4px;
              }
            }
          }

          &.color {
            .val {
              .num {
                color: #0000ff;
              }

              .order {
                color: #0000ff;

                span {
                  border: 1px solid;
                  background: rgba(0, 0, 255, 0.1);
                }
              }
            }
          }
        }

        .no_assess {
          width: 45%;
          height: 100px;
          display: flex;
          justify-content: center;
          align-items: center;
          vertical-align: middle;
          font-size: 18px;
          color: #ccc;
        }
      }
    }

    // 指标考核分对比
    .assess {
      margin-top: 30px;

      .assess_chart {
        width: 100%;
        height: 600px;
        overflow: hidden;
        border: 1px solid #ccc;
        margin-top: 20px;
        padding: 20px;

        .no_data {
          width: 40%;
        }
      }
    }
  }
}
</style>
